import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQml.Models 2.15


Popup {
    id: cusSupportParaPopupRoot
    implicitWidth: 270
    implicitHeight: 370
    closePolicy: Popup.CloseOnEscape
    readonly property color back_color: "#3d434d"
    property string title: "Non"
    property string description: "Non"
    property int imageWidth: 200
    property int imageHeight: 200
    property alias source: discriptionImage.source
    property int arrowPosition: 0 //0: top, 1: bottom

    function close(){
        showTimer.stop()
        cusSupportParaPopupRoot.visible = false
    }

    function show(){
        showTimer.start()
    }

    Timer{
        id: showTimer
        interval: 500
        repeat: false
        running: false
        onTriggered: {
            cusSupportParaPopupRoot.visible = true
        }
    }

    background: Rectangle{
        color: "transparent"
        implicitWidth: cusSupportParaPopupRoot.width
        implicitHeight: cusSupportParaPopupRoot.height

        Rectangle {
            id: arrowRect
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.topMargin: arrowPosition == 0 ? 30 : cusSupportParaPopupRoot.height - height - 30
            implicitWidth: 14
            implicitHeight: 21
            color: "transparent"

            Canvas {
                id: arrowCanvas
                anchors.fill: parent

                onPaint: {
                    var ctx = getContext("2d");
                    ctx.fillStyle = back_color
                    ctx.strokeStyle = "transparent"
                    ctx.lineWidth = 1

                    ctx.beginPath()
                    ctx.moveTo(0, parent.height / 2)
                    ctx.lineTo(parent.width, 0)
                    ctx.lineTo(parent.width, parent.height)
                    ctx.stroke()
                    ctx.fill()
                }
            }
        }

        Rectangle {
            id: contentRect
            anchors.top: parent.top
            anchors.left: arrowRect.right
            implicitWidth: parent.width
            implicitHeight: cusSupportParaPopupRoot.height
            color: back_color
            radius: 10

            ColumnLayout {
                id: contentColumnLayout
                anchors.fill: parent
                anchors.topMargin: 14
                anchors.bottomMargin: 14
                spacing: 14

                RowLayout {
                    id: nfaRowLayout
                    Layout.fillWidth: true
                    Layout.leftMargin: 14
                    Layout.rightMargin: 14
                    spacing: 4

                    Rectangle {
                        implicitWidth: 4
                        implicitHeight: 16
                        radius: width / 2
                        color: "#3986FF"
                    }

                    CusText {
                        text: cusSupportParaPopupRoot.title
                        color: "white"
                        font.pixelSize: Theme.font_size_14
                        font.weight: Font.Medium
                    }

                    Item {
                        Layout.fillWidth: true
                    }
                }

                CusText {
                    id: promptText
                    text: cusSupportParaPopupRoot.description
                    color: "white"

                    font.pixelSize: Theme.font_size_13
                    font.styleName: Theme.font_family_regular
                    wrapMode: Text.WordWrap
                    Layout.fillWidth: true
                    Layout.leftMargin: 14
                    Layout.rightMargin: 14
                }

                Rectangle {
                    implicitWidth: imageWidth
                    implicitHeight: imageHeight
                    color: "transparent"
                    Layout.alignment: Qt.AlignHCenter

                    Image {
                        id: discriptionImage
                        anchors.fill: parent
                        fillMode: Image.PreserveAspectFit
                    }
                }
            }
        }
    }
}
